<template>
  <!-- 左边第四个 面积图 -->
  <div class="wrapper">
    <div id="myChart2"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      //  配置数据
      options2: {
        color: ["#2f89cf"], // 柱子的颜色
        tooltip: {
          trigger: "axis", // 触发类型  柱子 或者  坐标触发
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // 防止鼠标事件 频繁触发 防止抖动
          transitionDuration: 0,
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "7%",
          containLabel: true, // 可以理解为 y轴在 图表里面
        },
        xAxis: [
          {
            type: "category", // x 轴的类型
            //   data: [
            //     "旅游行业",
            //     "教育培训",
            //     "游戏行业",
            //     "医疗行业",
            //     "电商行业",
            //     "社交行业",
            //     "金融行业"
            //   ],
            data: [
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
              "星期天",
            ],
            axisTick: {
              // 坐标轴刻度相关
              alignWithLabel: true, // 这个 false 和 true 有什么区别????
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ", // x 轴下面的 文字颜色
              fontSize: "12", // // x 轴下面的 字体大小
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12,
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    drawLine() {
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      myChart2.setOption(this.options2);
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="scss" scoped>
#myChart2 {
  width: 98%;
  height: 83%;
    // background-color: pink;
    // background: url('../../images/aj.jpg') no-repeat;
    // opacity: 0.3;
}
</style>